<template>
    <div>
      <van-search
  v-model="searchText"
  shape="round"
   show-action
  background="#ff734c"
  placeholder="玫瑰花"
  @search="onSearch"
>
 <template #action>
    <div @click="onSearch" class="search">搜索</div>
  </template>

</van-search>

<!-- 热门搜索 -->
<div class="hotsearch">
    <h6>热门搜索</h6>
    <div class="hotwords">
       <div class="hotword" @click="clickhot(hot)" v-for="hot in hots" :key="hot" >{{hot}}</div>
        </div>
</div>
    </div>
</template>

<script>
    export default {
        data() {
           return{
            searchText:'玫瑰花',
            hots:localStorage.getItem('hots')
                ?JSON.parse(localStorage.getItem('hots'))
                :[]
           }
            
        },
        methods:{
            clickhot(hot){
               this.searchText=hot
                 this.onSearch()
            },
            onSearch(){
                let hots= localStorage.getItem('hots')
                     ?JSON.parse(localStorage.getItem('hots'))
                     :[]
                hots.unshift(this.searchText)
                hots=[...new Set(hots)]
                hots.length = 5
                localStorage.setItem('hots',JSON.stringify(hots))

                
                this.$router.push({
                    path:'/searchlists',
                    query:{
                        keyWord:this.searchText
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.search{
    color: #fff;
}
.hotword{
    display: inline-block;
    background-color: #E9ECF0;
    font-size: 0.375rem;
    margin: 0.125rem;
    padding: 0.125rem;
}
</style>